<template>
<div class="search">
  <form action="/">
    <van-search show-action placeholder="输入疾病|药品|症状|医生|检查" @cancel="$router.push('/homeIndex/home')" />
  </form>
  <div class="main">
    <div class="top">
      <div>
        <span class="iconfont icon-zhenduanjilu"></span>
        <p>症状自诊</p>
      </div>
      <div @click="$router.push('/storehouse')">
        <span class="iconfont icon-ico_yaokuguanli_yaopinkucunyujing"></span>
        <p>药品库</p>
      </div>
      <div @click="$router.push('/disease')">
        <span class="iconfont icon-jibingguanli"></span>
        <p>疾病库</p>
      </div>
      <div @click="$router.push('/healthSurveyList')">
        <span class="iconfont icon-50"></span>
        <p>健康测评</p>
      </div>
    </div>
    <div class='bottom'>
      <h6>搜索推荐</h6>
      <span v-for='(item,index) in arr' :key='index'>
        {{item}}
      </span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      arr: ['减肥训练营', '痤疮', '动态血压', '流感', '发烧']
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 30px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.top {
  display: flex;

  justify-content: space-between;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
      margin: 10px 0;
      font-size: 14px;
      font-weight: 200;
    }
  }
}

.bottom {
  h6 {
    font-size: 18px;
    font-weight: 400;
    margin: 10px 0;
    ;
  }

  span {
    width: 30%;
    display: inline-block;
    height: 30px;
    font-size: 14px;
    text-align: center;
    background: #ccc;
    line-height: 30px;
    border-radius: 8px;
    margin: 5px;
  }

}
</style>
